<template>
  <div class="page-container fixed-bottom">
    <template v-if="status === 1 || status=== 2">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="营业时间：" prop="businessTime">
          <el-input v-model="form.businessTime" type="textarea" placeholder="【例】 午间场：上午11:00 - 下午14：00；晚间场：下午17:00 - 下午22：00" rows="5" clearable />
        </el-form-item>
        <el-form-item label="商家相册：" prop="shopAlbum">
          <UploadFile :file-list="form.albumImgUrls" :limit="9" @change="uploadHandle($event, 'albumImgUrls', 'shopAlbum')">
            <div slot="tip">建议尺寸：封面690*350px，首图/详情图690*350px，小于1M的JPG/PNG/GIF格式的图片。最多上传9张图片</div>
          </UploadFile>
          <UploadFile :file-list="form.albumVideoUrls" file-type="file" accept=".mp4" :limit="3" @change="uploadHandle($event, 'albumVideoUrls', 'shopAlbum')">
            <div slot="tip">小于100M的视频格式文件。最多上传3个</div>
          </UploadFile>
        </el-form-item>
        <el-form-item label="门店简介：">
          <el-input v-model="form.introduction" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="门店详情：" prop="description">
          <RichText :value.sync="form.description" />
        </el-form-item>
      </el-form>
      <div class="bottom-handle-box">
        <el-button v-if="!id" @click="confirmHandle(true)">保存草稿</el-button>
        <el-button type="primary" @click="confirmHandle(false)">发布</el-button>
      </div>
    </template>
    <Result
      v-if="status === -1 || status=== 0"
      :type="'shop'"
      :status="status"
      @reason="showReason"
      @cancel="cancelHandle"
      @resubmit="reSubmit"
    />
    <Reject
      v-if="showReject"
      :reject-form="rejectForm"
      @close="closeHandle"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadFile from '@/components/UploadFile/index.vue'
import RichText from '@/components/RichText/index.vue'
import Result from '@/components/Approve/Result.vue'
import Reject from '@/components/Approve/Reject.vue'
import { getShopDraft, decorationShop } from '@/api/shop'
import { rollShopBack, getLatestShop } from '@/api/common'
export default {
  name: 'ShopFace',
  components: {
    UploadFile,
    RichText,
    Result,
    Reject
  },
  data() {
    const validateShopAlbum = (rule, value, callback) => {
      if (this.form.albumImgUrls || this.form.albumVideoUrls) {
        callback()
      } else {
        callback(new Error('请上传商家相册'))
      }
    }
    return {
      id: '', // 门店id
      status: '', // 审核状态  -1：待审核  0：未通过 1：已通过  2：已撤销
      showReject: false,
      rejectForm: {},
      form: {
        businessTime: '',
        albumImgUrls: '',
        albumVideoUrls: '',
        introduction: '',
        description: ''
      },
      rules: {
        businessTime: [{ required: true, message: '请输入营业时间', trigger: ['blur'] }],
        shopAlbum: [{ required: true, validator: validateShopAlbum, trigger: ['change'] }],
        description: [{ required: true, message: '请输入门店详情', trigger: ['change'] }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ])
  },

  created() {
    this.getLatest()
  },

  methods: {

    // 获取最近审核记录
    getLatest() {
      const data = {
        siteId: this.currentSite.id
      }
      getLatestShop(data).then(res => {
        const { id, approveStatus, rejectReason, rejectFileUrl } = res
        if (id) {
          // 有审核记录时
          this.status = approveStatus
          this.rejectForm = {
            rejectReason,
            rejectFileUrl
          }
          this.getShopDraft()
        } else {
          this.status = 1
        }
      }).catch(() => {})
    },

    // 获取店铺装修草稿
    getShopDraft() {
      const data = {
        siteId: this.currentSite.id
      }
      getShopDraft(data).then(res => {
        if (res.id) {
          const { id, businessTime, albumImgUrls, albumVideoUrls, introduction, description } = res
          this.id = id
          this.form = {
            businessTime,
            albumImgUrls,
            albumVideoUrls,
            introduction,
            description
          }
        }
      }).catch(() => {})
    },

    // 保存
    async confirmHandle(draft) {
      if (!draft) {
        await this.$refs.form.validate()
      }
      const data = {
        ...this.form,
        draft,
        enterpriseId: this.currentEnterprise.id,
        siteId: this.currentSite.id,
        id: this.id ? this.id : undefined
      }
      decorationShop(data).then(() => {
        if (draft) {
          this.$message.success('保存草稿成功')
        } else {
          this.$message.success('发布成功')
          this.status = -1
        }
      }).catch(() => {})
    },

    // 撤销发布
    cancelHandle() {
      const data = {
        siteId: this.currentSite.id
      }
      this.$confirm('确定要撤销发布吗?', '提示', {
        type: 'warning'
      }).then(() => {
        rollShopBack(data).then(() => {
          this.$message.success('撤销发布成功')
          this.getLatest()
        }).catch(() => {})
      }).catch(() => {})
    },

    // 展示拒绝原因
    showReason() {
      this.showReject = true
    },

    // 关闭
    closeHandle() {
      this.showReject = false
    },

    // 重新提交
    reSubmit() {
      this.status = 1
    },

    // 上传图片处理
    uploadHandle(payload, name, prop) {
      const fileList = payload.fileList
      const result = []
      fileList.map(item => {
        result.push(item.url)
      })
      this.form[name] = result.join(',')
      this.$refs.form.validateField(prop)
    }
  }
}
</script>

<style lang="scss" scoped></style>
